<template>
	<view class="yz" :class="{'theme--Black':CurrentTheme.name==='DarkMode'}">
		<!-- 导航栏 -->
		<u-navbar title-color="#fff" back-icon-color="#ffffff" is-back="true" :background="navbar" :back-text-style="{ color: '#fff' }"
		 title="文件传输" back-icon-name="nav-back">
		</u-navbar>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper :class="{'theme--Black':CurrentTheme.name==='DarkMode'}" 
				activeColor="#55aaff" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false"
				 swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<!-- ***************************上传部分******************************* -->
						<view class="no-reccord" v-if="File_Get_CompleteUploadTask.length == 0 && File_Get_UploadTask.length == 0">
							<image class="tip-img" src="../../../static/img/other/upload.png"></image>
							<text class="fo-28 fo-gray mt30">暂无上传记录</text>
						</view>
						<view class="page-box" v-else>
							<view class="padd20 mt20 flex wid1p justify-between ali-cen fo-gray">
								<view>正在上传({{File_Get_UploadTask.length}})</view>
								<view class='y-btn'>全部取消</view>
							</view>
							<view class="" v-for="i in File_Get_UploadTask">
								<view class="task-item">
									<view class="flex ali-cen flex1 mr50">
										<load-img class="task-img" v-if="comIsImg('img', i.fileName)" mode="aspectFill" :src="i.LocalPath"></load-img>
										<image class="task-img" v-if="comIsImg('video', i.fileName)" src="../../../static/img/home/UploadVideo.png"></image>
										<image class="task-img" v-if="comIsImg('audio', i.fileName)" src="../../../static/img/home/UploadAudio.png"></image>
										<image class="task-img" v-if="comIsImg('doc', i.fileName)" src="../../../static/img/home/UploadDoc.png"></image>
										<image class="task-img" v-if="comIsImg('PPT', i.fileName)" src="../../../static/img/home/ppt.png"></image>
										<image class="task-img" v-if="comIsImg('HTML', i.fileName)" src="../../../static/img/home/HTML.png"></image>
										<image class="task-img" v-if="comIsImg('CSS', i.fileName)" src="../../../static/img/home/CSS.png"></image>
										<image class="task-img" v-if="comIsImg('JS', i.fileName)" src="../../../static/img/home/JS.png"></image>
										<image class="task-img" v-if="comIsImg('Vue', i.fileName)" src="../../../static/img/home/Vue.png"></image>
										<image class="task-img" v-if="comIsImg('JSON', i.fileName)" src="../../../static/img/home/JSON.png"></image>
										<image class="task-img" v-if="comIsImg('MD', i.fileName)" src="../../../static/img/home/MD.png"></image>
										<image class="task-img" v-if="comIsImg('PDF', i.fileName)" src="../../../static/img/home/pdf.png"></image>
										<image class="task-img" v-if="comIsImg('yasuo', i.fileName)" src="../../../static/img/home/yasuo.png"></image>
										<image class="task-img" v-if="$tool.getFileType(i.fileName) == 'adu'" src="../../../static/img/home/UploadDoc.png"></image>
										<view class="task-content-txt wid1p">
											<view class="yy-txt-over1 font-wei600 fo-32" style="width: 440rpx;">{{ i.fileName }}</view>
											<progress class="paddtb10" :percent="i.progress" active stroke-width="4"
											active-mode="forwards" active="#0081ff" />
											<view class="flex ali-cen just-spa-bet fo-gray">
												<view class="yy-txt-over1 yymt10">{{ i.currentTotal }} / {{ i.total }}</view>
												<view>{{$tool.comFileSize(i.Speed)}}/s</view>
											</view>
										</view>
									</view>
									<view class="task-item-btn" @click="onStop(i.id)">
										<view class="cuIcon-stop"></view>
									</view>
								</view>
							</view>
							<view class="padd20 mt20 flex wid1p justify-between fo-gray">
								<view>上传完成({{ File_Get_CompleteUploadTask.length }})</view>
							</view>
							<view class="" v-for="i in File_Get_CompleteUploadTask">
								<view class="task-item" @touchstart='itemTouchStart(i.fileId)' @touchend='itemTouchEnd'>
									<view class="flex ali-cen flex1 mr50">
										<load-img class="task-img" v-if="comIsImg('img', i.fileName)" mode="aspectFill" :src="i.outNetPath"></load-img>
										<image class="task-img" v-if="comIsImg('video', i.fileName)" src="../../../static/img/home/UploadVideo.png"></image>
										<image class="task-img" v-if="comIsImg('audio', i.fileName)" src="../../../static/img/home/UploadAudio.png"></image>
										<image class="task-img" v-if="comIsImg('doc', i.fileName)" src="../../../static/img/home/UploadDoc.png"></image>
										<image class="task-img" v-if="comIsImg('PPT', i.fileName)" src="../../../static/img/home/ppt.png"></image>
										<image class="task-img" v-if="comIsImg('HTML', i.fileName)" src="../../../static/img/home/HTML.png"></image>
										<image class="task-img" v-if="comIsImg('CSS', i.fileName)" src="../../../static/img/home/CSS.png"></image>
										<image class="task-img" v-if="comIsImg('JS', i.fileName)" src="../../../static/img/home/JS.png"></image>
										<image class="task-img" v-if="comIsImg('Vue', i.fileName)" src="../../../static/img/home/Vue.png"></image>
										<image class="task-img" v-if="comIsImg('JSON', i.fileName)" src="../../../static/img/home/JSON.png"></image>
										<image class="task-img" v-if="comIsImg('MD', i.fileName)" src="../../../static/img/home/MD.png"></image>
										<image class="task-img" v-if="comIsImg('PDF', i.fileName)" src="../../../static/img/home/pdf.png"></image>
										<image class="task-img" v-if="comIsImg('yasuo', i.fileName)" src="../../../static/img/home/yasuo.png"></image>
										<image class="task-img" v-if="$tool.getFileType(i.fileName) == 'adu'" src="../../../static/img/home/UploadDoc.png"></image>
										<view class="task-content-txt wid1p">
											<view class="yy-txt-over1 font-wei600 fo-32" style="width: 550rpx;">{{ i.fileName }}</view>
											<view class="yy-txt-over1 yymt10 fo-gray">{{ $tool.comFileSize(i.fileSize) }} 
											{{ $tool.create_time(new Date(i.SyncTime), 'YYYYMMMDDHHMMSS') }}</view>
										</view>
									</view>
								</view>
							</view>
							<!-- <u-loadmore :status="loadStatus[0]" bgColor="#ffffff"></u-loadmore> -->
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<!-- ***************************下载部分******************************* -->
					<view class="no-reccord" v-if="File_Get_CompleteDownloadTask.length == 0 && File_Get_DownloadTaskt.length == 0">
						<image class="tip-img" src="../../../static/img/other/download.png"></image>
						<text class="fo-28 fo-gray mt30">暂无下载记录</text>
					</view>
					<view class="page-box" v-else>
						<view class="padd20 mt20 flex wid1p justify-between ali-cen fo-gray">
							<view>正在下载({{File_Get_DownloadTaskt.length}})</view>
							<view class='y-btn'>全部取消</view>
						</view>
						<view class="" v-for="i in File_Get_DownloadTaskt">
							<view class="task-item">
								<view class="flex ali-cen flex1 mr50">
									<load-img class="task-img" v-if="comIsImg('img', i.fileName)" mode="aspectFill" :src="i.LocalPath"></load-img>
									<image class="task-img" v-if="comIsImg('video', i.fileName)" src="../../../static/img/home/UploadVideo.png"></image>
									<image class="task-img" v-if="comIsImg('audio', i.fileName)" src="../../../static/img/home/UploadAudio.png"></image>
									<image class="task-img" v-if="comIsImg('doc', i.fileName)" src="../../../static/img/home/UploadDoc.png"></image>
									<image class="task-img" v-if="comIsImg('PPT', i.fileName)" src="../../../static/img/home/ppt.png"></image>
									<image class="task-img" v-if="comIsImg('HTML', i.fileName)" src="../../../static/img/home/HTML.png"></image>
									<image class="task-img" v-if="comIsImg('CSS', i.fileName)" src="../../../static/img/home/CSS.png"></image>
									<image class="task-img" v-if="comIsImg('JS', i.fileName)" src="../../../static/img/home/JS.png"></image>
									<image class="task-img" v-if="comIsImg('Vue', i.fileName)" src="../../../static/img/home/Vue.png"></image>
									<image class="task-img" v-if="comIsImg('JSON', i.fileName)" src="../../../static/img/home/JSON.png"></image>
									<image class="task-img" v-if="comIsImg('MD', i.fileName)" src="../../../static/img/home/MD.png"></image>
									<image class="task-img" v-if="comIsImg('PDF', i.fileName)" src="../../../static/img/home/pdf.png"></image>
									<image class="task-img" v-if="comIsImg('yasuo', i.fileName)" src="../../../static/img/home/yasuo.png"></image>
									<image class="task-img" v-if="$tool.getFileType(i.fileName) == 'adu'" src="../../../static/img/home/UploadDoc.png"></image>
									<view class="task-content-txt wid1p">
										<view class="yy-txt-over1 font-wei600 fo-32" style="width: 440rpx;">{{ i.fileName }}</view>
										<progress class="paddtb10" :percent="i.progress.percent" active stroke-width="4"
										active-mode="forwards" active="#0081ff" />
										<view class="flex ali-cen just-spa-bet fo-gray">
											<view class="yy-txt-over1 yymt10">{{ i.progress.curSize }} / {{ i.progress.totalSize }}</view>
											<view>{{$tool.comFileSize(i.Speed)}}/s</view>
										</view>
									</view>
								</view>
								<view class="task-item-btn" @click="onStop(i.id)">
									<view class="cuIcon-stop"></view>
								</view>
							</view>
						</view>
						<view class="padd20 mt20 flex wid1p justify-between fo-gray">
							<view>下载完成({{ File_Get_CompleteDownloadTask.length }})</view>
						</view>
						<view class="" v-for="i in File_Get_CompleteDownloadTask">
							<view class="task-item" @touchstart='itemTouchStart(i.fileId)' @touchend='itemTouchEnd'>
								<view class="flex ali-cen flex1 mr50">
									<load-img class="task-img" v-if="comIsImg('img', i.fileName)" mode="aspectFill" :src="i.LocalPath"></load-img>
									<image class="task-img" v-if="comIsImg('video', i.fileName)" src="../../../static/img/home/UploadVideo.png"></image>
									<image class="task-img" v-if="comIsImg('audio', i.fileName)" src="../../../static/img/home/UploadAudio.png"></image>
									<image class="task-img" v-if="comIsImg('doc', i.fileName)" src="../../../static/img/home/UploadDoc.png"></image>
									<image class="task-img" v-if="comIsImg('PPT', i.fileName)" src="../../../static/img/home/ppt.png"></image>
									<image class="task-img" v-if="comIsImg('HTML', i.fileName)" src="../../../static/img/home/HTML.png"></image>
									<image class="task-img" v-if="comIsImg('CSS', i.fileName)" src="../../../static/img/home/CSS.png"></image>
									<image class="task-img" v-if="comIsImg('JS', i.fileName)" src="../../../static/img/home/JS.png"></image>
									<image class="task-img" v-if="comIsImg('Vue', i.fileName)" src="../../../static/img/home/Vue.png"></image>
									<image class="task-img" v-if="comIsImg('JSON', i.fileName)" src="../../../static/img/home/JSON.png"></image>
									<image class="task-img" v-if="comIsImg('MD', i.fileName)" src="../../../static/img/home/MD.png"></image>
									<image class="task-img" v-if="comIsImg('PDF', i.fileName)" src="../../../static/img/home/pdf.png"></image>
									<image class="task-img" v-if="comIsImg('yasuo', i.fileName)" src="../../../static/img/home/yasuo.png"></image>
									<image class="task-img" v-if="$tool.getFileType(i.fileName) == 'adu'" src="../../../static/img/home/UploadDoc.png"></image>
									<view class="task-content-txt wid1p">
										<view class="yy-txt-over1 font-wei600 fo-32" style="width: 550rpx;">{{ i.fileName }}</view>
										<view class="yy-txt-over1 yymt10 fo-gray">{{ i.progress.totalSize }} {{ i.completeTime }}</view>
									</view>
								</view>
							</view>
						</view>
						<!-- <u-loadmore :status="loadStatus[0]" bgColor="#ffffff"></u-loadmore> -->
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="no-reccord">
						<image class="tip-img" src="../../../static/img/other/download.png"></image>
						<text class="fo-28 fo-gray mt30">暂无离线下载记录</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 拟态框弹窗 -->
		<YModal :YModalShow.sync='YModalShow' title='提示' :content='YModalTxt' @SubmitOk='YModal_SubmitOk'></YModal>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import YModal from '@/common/components/Y-showModel/index.vue'
	import loadImg from '@/components/loadImg/index.vue';
	import { API$DelUploadRecord, API$GetUploadRecordList } from '@/common/API/file.js';
	let timers = null,
	delID=null // 取消上传任务的id
	export default {
		components: {YModal,loadImg},
		data() {
			return {
				navbar: {   // 自定义导航栏
					background: '#87ceeb'
				},
				
				YModalShow: false, //拟态框
				YModalTxt: '是否取消上传任务？', // 拟态框提示内容
				list: [{
						name: '上传记录'
					},
					{
						name: '下载记录'
					},
					{
						name: '离线下载',
						count: 12
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
			};
		},
		async created() {
			this.GetRecodList();
		},
		onShow() {
			// #ifdef APP-PLUS
			//设置导航栏前景色
			this.$nextTick(()=>plus.navigator.setStatusBarStyle(this.CurrentTheme.name==='DarkMode'?'light':"dark"))
			// #endif
		},
		mounted() {
			this.navbar.background = this.CurrentTheme.navColor
		},
		computed: {
			...mapGetters(
				['File_Get_DownloadTaskt', 'File_Get_CompleteDownloadTask', 'File_Get_UploadTask', 'File_Get_CompleteUploadTask']
			),
			// 计算是否是图片资源
			comIsImg() {
				return (type, str) => {
					if (type == 'img') {
						return this.$tool.ImgTypes(this.$tool.getFileType(str));
					} else if (type == 'video') {
						return this.$tool.ViodeoTypes(this.$tool.getFileType(str));
					} else if (type == 'doc') {
						return this.$tool.DocTypes(this.$tool.getFileType(str));
					} else if (type == 'audio') {
						return this.$tool.AudioTypes(this.$tool.getFileType(str));
					} else if (type == 'HTML') {
						return this.$tool.getFileType(str) == 'html';
					} else if (type == 'CSS') {
						return this.$tool.getFileType(str) == 'css';
					} else if (type == 'JS') {
						return this.$tool.getFileType(str) == 'js';
					} else if (type == 'Vue') {
						return this.$tool.getFileType(str) == 'vue';
					} else if (type == 'JSON') {
						return this.$tool.getFileType(str) == 'json';
					} else if (type == 'MD') {
						return this.$tool.getFileType(str) == 'md';
					} else if (type == 'PDF') {
						return this.$tool.getFileType(str) == 'pdf';
					} else if (type == 'PPT') {
						return this.$tool.PPTTypes(this.$tool.getFileType(str));
					} else if (type == 'yasuo') {
						return this.$tool.yasuoTypes(this.$tool.getFileType(str));
					}
				};
			}
		},
		methods: {
			// item条长按开始
			itemTouchStart(e){
				// e.preventDefault();
				if(timers) return
				timers = setTimeout(()=>{
					clearTimeout(timers)
					timers = null
					delID = e
					this.YModalTxt = '是否删除该上传任务记录？'
					this.YModalShow = true
				},1000)
			},
			// item条长按结束
			itemTouchEnd(e){
				e.preventDefault();
				clearTimeout(timers)
				timers = null
			},
			// 任务取消上传
			onStop(e){
				delID = e
				this.YModalTxt = '是否取消上传任务？'
				this.YModalShow = true
			},
			// 弹窗成功回调
			async YModal_SubmitOk(e) {
				if(this.YModalTxt==='是否取消上传任务？'){
					this.$store.commit('stopUploadTask',delID)
					this.$pub.Toast('已取消上传任务~')
				}else if(this.YModalTxt==='是否删除该上传任务记录？'){
					await API$DelUploadRecord({ fileId: delID });
					this.$pub.Toast('已删除该上传任务记录~')
					this.GetRecodList();
				}
			},
			reachBottom() {
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			/*****************************************************数据处理部分**********************************************************************************/
			async GetRecodList() {
				let res = await API$GetUploadRecordList();
				this.$store.commit('CHANGE_CompleteUploadTask', res.result.data);
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	.yz {
		height:100vh;
		overflow: scroll;
	}
	/* #endif */
</style>

<style scoped lang="less">
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--status-bar-height) - 44px);
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	// 暂无上传记录
	.no-reccord {
		position: absolute;
		top: 50%;
		transform: translate3d(0, -50%, 0);
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
	}

	.tip-img {
		height: 160rpx;
		width: 160rpx;
	}

	// 按钮
	.y-btn {
		padding: 10rpx 30rpx;
		letter-spacing: 4rpx;
		color: #0081ff;
		border-radius: 40rpx;
		background-color: #d9eff9;
	}

	// 上传下载列表条
	.task-item {
		padding: 20rpx 40rpx;
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}

	.task-img {
		margin-right: 30rpx;
		height: 80rpx;
		width: 80rpx;
	}

	.task-item-txt {
		width: 400rpx;
	}

	.task-item-btn {
		border-radius: 50%;
		background-color: #d9eff9;
		color: #0081ff;
		font-size: 36rpx;
		font-weight: 600;
		padding: 10rpx 14rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	// 图片懒加载类名穿透  .img 是内部类名
	/deep/ .img {
		height: 60rpx;
		width: 60rpx;
		border-radius: 10rpx;
		/deep/ image {
			border-radius: 10rpx;
			overflow: hidden;
		}
	}
	
	
	// 主题
	.theme--Black{
		/deep/ .input-box{
			background-color: gray;
			color:#ffffff;
		}
		/deep/ .u-border-bottom:after{
			border-bottom-width:0;
		}
	}
</style>
